<template>
  <div>
    <!-- sku表格 -->
    <el-table :data="skuList" border style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="80px">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="width">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述" width="width">
      </el-table-column>
      <el-table-column label="默认图片" width="106px" align="center">
        <template slot-scope="{ row }">
          <img :src="row.skuDefaultImg" style="width: 80px" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" align="center" label="重量" width="80px">
      </el-table-column>
      <el-table-column prop="price" align="center" label="价格" width="80px">
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            icon="el-icon-sort-down"
            size="mini"
            v-if="row.isSale == 0"
            @click="onSale(row.id)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-sort-up"
            size="mini"
            v-else
            @click="cancelSale(row.id)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editSku"
          ></el-button>
          <el-button
            type="info"
            icon="el-icon-info"
            size="mini"
            @click="showSkuInfo(row.id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteSku(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,sizes, total"
      :total="totalCount"
      style="text-align: center"
    >
    </el-pagination>
    <!-- 抽屉 -->
    <el-drawer :visible.sync="drawerVisable" size="40%">
      <el-form ref="form" label-width="120px" style="padding: 10px">
        <el-form-item label="名称：">
          <span>{{ oneSkuList.skuName }}</span>
        </el-form-item>
        <el-form-item label="描述：">
          <span>{{ oneSkuList.skuDesc }}</span>
        </el-form-item>
        <el-form-item label="价格：">
          <span>{{ oneSkuList.price }}元</span>
        </el-form-item>
        <el-form-item label="平台属性：">
          <el-tag
            type="success"
            v-for="it in oneSkuList.skuAttrValueList"
            :key="it.id"
            size="small"
            style="margin: 5px"
            >{{ it.attrName }}</el-tag
          >
        </el-form-item>
        <el-form-item label="商品图片：">
          <!-- 走马灯/轮播图 -->
          <el-carousel height="250px">
            <el-carousel-item v-for="it in oneSkuList.skuImageList" :key="it.id">
              <img :src="it.imgUrl" style="width:470px;height:250px">
            </el-carousel-item>
          </el-carousel>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Sku",
  data() {
    return {
      // sku列表
      skuList: [],
      // 分页器参数
      // 当前页码
      page: 1,
      // 页面大小
      limit: 5,
      // 全部页面数量
      totalCount: 0,
      // 控制抽屉的显示与隐藏
      drawerVisable: false,
      // 存储临时的每一行数据供抽屉展示
      oneSkuList: {},
    };
  },
  mounted() {
    this.getSkuList();
  },
  methods: {
    // 获取sku列表
    async getSkuList() {
      const res = await this.$API.sku.reqGetSkuList({
        page: this.page,
        limit: this.limit,
      });
      if (res.code === 200) {
        // 保存数据
        this.skuList = res.data.records;
        this.totalCount = res.data.total;
      }
    },
    // 当前页面发生变化
    handleCurrentChange(page) {
      this.page = page;
      // 重新获取数据
      this.getSkuList();
    },
    // 页面大小发生变化
    handleSizeChange(limit) {
      this.limit = limit;
      // 重新获取数据
      this.getSkuList();
    },
    // 上架
    async onSale(skuId) {
      const res = await this.$API.sku.reqOnSale({ skuId });
      if (res.code === 200) {
        this.$message.success("上架成功");
        // 重新获取列表
        this.getSkuList();
      } else {
        this.$message.error("上架失败");
      }
    },
    // 下架
    async cancelSale(skuId) {
      const res = await this.$API.sku.reqCancelSale({ skuId });
      if (res.code === 200) {
        this.$message.success("下架成功");
        // 重新获取列表
        this.getSkuList();
      } else {
        this.$message.error("下架失败");
      }
    },
    // 删除sku
    async deleteSku(skuId) {
      const res = await this.$API.sku.reqDeleteSku({ skuId });
      if (res.code === 200) {
        this.$message.success("删除sku成功");
        this.getSkuList();
      } else {
        this.$message.error("删除sku失败");
      }
    },
    // 编辑sku
    editSku() {
      this.$message.info("正在开发中");
    },
    // 展示sku抽屉
    async showSkuInfo(skuId) {
      // 获取当前行的所有信息
      const res = await this.$API.sku.reqGetSkuById({ skuId });
      console.log(res);
      if (res.code === 200) this.oneSkuList = res.data;
      this.drawerVisable = true;
    },
  },
};
</script>

<style scoped>
  /* 改变轮播图下方小圆点 */
  /* 加scoped的，如果想要影响子组件的样式 */
  /* 需要使用深度选择器 
   1.原生css 用 >>>
   2.less 用 /deep/
   3.scss 用 ::v-deep
  */
  >>>.el-carousel__button{
    height: 10px;
    width: 10px;
    background-color: hotpink;
    border-radius: 50%;
  }
</style>